<!DOCTYPE html>

<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
  <meta name="baidu-site-verification" content="GOgEP8c1pN"/>
  

  <title>
    Django Pagination 完善分页_Django博客教程_追梦人物的博客</title>

  <link href="font-awesome.min.css"
        rel="stylesheet">
  <link rel="stylesheet" href="mobi.min.css">
  <link rel="stylesheet" href="modal.min.css">
  <link rel="stylesheet" href="friendly.css">
  <link rel="stylesheet" href="blog.css?v0.12">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="/static/blog/js/menu.js"></script>
  <script src="/static/blog/js/modal.min.js"></script>
  <script src="/static/blog/js/blog.js"></script>
  

  
    <script>
        // baidu statistics
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?fb59b2a6022bccc02671a750f61c356b";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();

        // baidu auto push
        (function () {
            var bp = document.createElement('script');
            var curProtocol = window.location.protocol.split(':')[0];
            if (curProtocol === 'https') {
                bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
            }
            else {
                bp.src = 'http://push.zhanzhang.baidu.com/push.js';
            }
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(bp, s);
        })();
    </script>
    
  
</head>
<body class="bg-light">
<header>
  <nav class="flex-center bg-white nav-bar">
    <div class="container-wider flex-middle">
      
  <a class="show-on-mobile nav-link m-5" id="js-sidebar-btn" href="#" role="button">
    <i class="fa fa-chevron-right" aria-hidden="true"></i>
  </a>

      <a class="nav-bar-logo mr-7" href="/">
        <img src="/static/blog/images/logo.png" alt="blog logo">
      </a>
      <ul class="unit-0 hide-on-mobile nav-bar-nav">
        <li class="nav-item mr-7">
          <a class="nav-link" href="/">首页</a>
        </li>
        <li class="nav-item mr-7">
          <a class="nav-link" href="/tutorials/">教程</a>
        </li>
        <li class="nav-item mr-7">
          <a class="nav-link" href="/categories/">分类</a>
        </li>
        <li class="nav-item mr-7">
          <a class="nav-link" href="/archives/">归档</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/donate/">赞助</a>
        </li>
      </ul>
      <div class="unit flex-right flex-middle">
        <form class="hide-on-mobile flex-left flex-middle search-form mr-5" id="search-form"
              action="/search/">
          <input class="unit" type="search" name="q" placeholder="搜索..."/>
          <button class="unit-0" type="submit" role="button">
            <i class="fa fa-search" aria-hidden="true"></i>
          </button>
        </form>
        <a class="show-on-mobile nav-link fs-7 mr-7" id="js-search-btn" href="#" role="button">
          <i class="fa fa-search" aria-hidden="true"></i>
        </a>
        <div class="flex-middle notification">
          
            <a class="nav-link" href="/accounts/login/">
              <i class="fa fa-sign-in" aria-hidden="true"></i>
            </a>
          
        </div>
        <div class="show-on-mobile flex-middle">
          <a class="nav-link fs-7 ml-7 mr-5" id="menu-toggle" href="#">
            <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
          </a>
          <ul class="menu bg-white" data-menu data-menu-toggle="#menu-toggle">
            <li class="nav-item mr-7">
              <a class="nav-link" href="/">首页</a>
            </li>
            <li>
              <a href="/tutorials/">教程</a>
            </li>
            <li>
              <a href="/categories/">分类</a>
            </li>
            <li>
              <a href="/archives/">归档</a>
            </li>
            <li>
              <a href="/donate/">赞助</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
</header>
<section class="flex-center">
  <div class="container-wider">
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
              &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">设置评论回复接收邮箱</h4>
            <div class="text-primary mt-2">邮箱仅用于接收回复提醒，不会被公开。</div>
            
          </div>
          <div class="modal-body">
            <form class="form email-binding-form" action="/comments/ajax_email_binding/">
              <div class="message">
                <span class="text-danger"></span>
              </div>
              <input type='hidden' name='csrfmiddlewaretoken' value='hdxB29QIrIalyWMydeet3OKGVbPOUKczmbUEtuxH1EGA3f2TqGKubfjaLIMm0swh' />
              <div class="flex-left units-gap">
                <label class="unit-0 text-right" for="multiple-inputs-name">邮箱: </label>
                <div class="unit">
                  <input type="email" name="email" id="id_email" placeholder="请输入绑定邮箱"/>
                </div>
                <div class="unit-0">
                  <button class="btn" id="js-send" type="button"
                          data-target="/comments/ajax_verification_code/">发送验证码
                  </button>
                </div>
              </div>
              <div class="flex-left units-gap">
                <label class="unit-0 text-right" for="multiple-inputs-name">验证码: </label>
                <div class="unit">
                  <input type="text" name="verification_code" id="id_verification_code"
                         placeholder="请输入接收到的验证码"/>
                </div>
              </div>
              <div class="flex-right">
                <button type="button" class="btn btn-danger mr-3" data-dismiss="modal">关闭</button>
                <button type="submit" class="btn btn-primary" id="js-submit">设置</button>
              </div>
            </form>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal -->
    </div>
    <div class="flex-left flex-wrap "
         style="margin-top: 60px">
      
  <aside class="unit-1-4 unit-1-on-mobile top-gap">
    <div class="scroll-view bg-white card toc-sidebar" style="height: 100%">
      <div class="card-header">
        目录
      </div>
      <div class="flex-left">
        <div class="unit-1-4">
          <a href="https://promotion.aliyun.com/ntms/act/group/team.html?group=FcfAncJPAp" target="_blank"><img
              src="/static/blog/images/aliyun.jpg" alt=""></a>
        </div>
        <div class="unit-1-2 flex-vertical top-gap text-small">
          <a style="color: #e83e8c" target="_blank"
             href="https://promotion.aliyun.com/ntms/act/group/team.html?group=FcfAncJPAp">云服务器新用户</a>
          <a style="color: #6610f2" target="_blank"
             href="https://promotion.aliyun.com/ntms/act/group/team.html?group=FcfAncJPAp">8元/月</a>
        </div>
      </div>
      <div class="card-body">
        <ul>
          <li>
            <h6 class="top-gap-0"><a href="">Django博客教程</a></h6>
            <ul>
              
                <li>
                  <a href="2.html">前言</a>
                  
                </li>
              
                <li>
                  <a href="3.html">搭建开发环境</a>
                  
                </li>
              
                <li>
                  <a href="4.html">建立 Django 博客应用</a>
                  
                </li>
              
                <li>
                  <a href="5.html">创建 Django 博客的数据库模型</a>
                  
                </li>
              
                <li>
                  <a href="6.html">让 Django 完成翻译：迁移数据库</a>
                  
                </li>
              
                <li>
                  <a href="7.html">Django 博客首页视图</a>
                  
                </li>
              
                <li>
                  <a href="8.html">真正的 Django 博客首页视图</a>
                  
                </li>
              
                <li>
                  <a href="9.html">在 Django Admin 后台发布文章</a>
                  
                </li>
              
                <li>
                  <a href="10.html">博客文章详情页</a>
                  
                </li>
              
                <li>
                  <a href="11.html">支持 Markdown 语法和代码高亮</a>
                  
                </li>
              
                <li>
                  <a href="12.html">页面侧边栏：使用自定义模板标签</a>
                  
                </li>
              
                <li>
                  <a href="13.html">分类与归档</a>
                  
                </li>
              
                <li>
                  <a href="14.html">评论</a>
                  
                </li>
              
                <li>
                  <a href="16.html">已知小问题修正</a>
                  
                </li>
              
                <li>
                  <a href="20.html">使用 Nginx 和 Gunicorn 部署 Django 博客</a>
                  
                </li>
              
                <li>
                  <a href="21.html">使用 Fabric 自动化部署</a>
                  
                </li>
              
                <li>
                  <a href="29.html">统计文章阅读量</a>
                  
                </li>
              
                <li>
                  <a href="32.html">自动生成文章摘要</a>
                  
                </li>
              
                <li>
                  <a href="33.html">基于类的通用视图：ListView 和 DetailView</a>
                  
                </li>
              
                <li>
                  <a href="34.html">Django Pagination 简单分页</a>
                  
                </li>
              
                <li>
                  <a href="37.html">Django Pagination 完善分页</a>
                  
                    <div class="toc">
<ul>
<li><a href="#分页效果概述">分页效果概述</a></li>
<li><a href="#拓展-pagination">拓展 Pagination</a></li>
<li><a href="#模板中设置分页导航">模板中设置分页导航</a></li>
<li><a href="#总结">总结</a></li>
</ul>
</div>

                  
                </li>
              
                <li>
                  <a href="38.html">统计各个分类下的文章数</a>
                  
                </li>
              
                <li>
                  <a href="39.html">标签云</a>
                  
                </li>
              
                <li>
                  <a href="41.html">RSS 订阅</a>
                  
                </li>
              
                <li>
                  <a href="43.html">Markdown 自动生成文章目录</a>
                  
                </li>
              
                <li>
                  <a href="44.html">简单全文搜索</a>
                  
                </li>
              
                <li>
                  <a href="45.html">Django Haystack 全文检索与关键词高亮</a>
                  
                </li>
              
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </aside>

      
  <div class="unit-3-4 unit-1-on-mobile top-gap">
    


<div class="bg-white card post-card px-7 py-5">
  
<article class="post">
  <h1 class="top-gap-0">Django Pagination 完善分页</h1>
  <ul class="list-inline dot-divider post-meta">
    <li class="list-inline-item text-small text-muted">
      10 月，1 周前
    </li>
    <li class="list-inline-item text-small text-muted">6640 字
    </li>
    <li class="list-inline-item text-small text-muted">
      9088 阅读
    </li>
    <li class="list-inline-item text-small text-muted">
      66 评论
    </li>
  </ul>
  <div class="top-gap-big post-body">
    <p>在 <a href="http://zmrenwu.com34.html">Django Pagination 简单分页</a> 中，我们实现了一个简单的分页导航效果。但效果有点差强人意，我们只能点上一页和下一页的按钮进行翻页。比较完善的分页效果应该像下面这样，但想实现这样一种效果，Django Pagination 内置的 API 已无能为力。本文将通过拓展 Django Pagination 来实现下图这样比较完善的分页效果。</p>
<p><img alt="高级分页效果图" src="//bkt.zmrenwu.com/%E9%AB%98%E7%BA%A7%E5%88%86%E9%A1%B5%E6%95%88%E6%9E%9C.png" /></p>
<h2 id="分页效果概述">分页效果概述</h2>
<p>一个比较完善的分页效果应该具有以下特性，就像上图展示的那样，很多网站都采用了类似这种的分页导航方式。</p>
<ul>
<li>始终显示第一页和最后一页。</li>
<li>当前页码高亮显示。</li>
<li>显示当前页码前后几个连续的页码。</li>
<li>如果两个页码号间还有其它页码，中间显示省略号以提示用户。</li>
</ul>
<h2 id="拓展-pagination">拓展 Pagination</h2>
<p>在此之前，我们已将首页文章列表的视图函数转为了类视图，并且使用了类视图 <code>ListView</code> 中已经为我们写好的分页代码来达到分页的目的（详情请查看文章开头处给出的链接）。为了实现如下所展示的分页效果，接下来就需要在 <code>ListView</code> 的基础上进一步拓展分页的逻辑代码。</p>
<p><img alt="高级分页效果图" src="//bkt.zmrenwu.com/%E9%AB%98%E7%BA%A7%E5%88%86%E9%A1%B5%E6%95%88%E6%9E%9C.png" /></p>
<p>先来分析一下导航条的组成部分，可以看到整个分页导航条其实可以分成 七个部分：</p>
<ol>
<li>第 1 页页码，这一页需要始终显示。</li>
<li>第 1 页页码后面的省略号部分。但要注意如果第 1 页的页码号后面紧跟着页码号 2，那么省略号就不应该显示。</li>
<li>当前页码的左边部分，比如这里的 3-6。</li>
<li>当前页码，比如这里的 7。</li>
<li>当前页码的右边部分，比如这里的 8-11。</li>
<li>最后一页页码前面的省略号部分。但要注意如果最后一页的页码号前面跟着的页码号是连续的，那么省略号就不应该显示。</li>
<li>最后一页的页码号。</li>
</ol>
<p>因此我们的思路是，在视图里将以上七步中所需要的数据生成，然后传递给模板并在模板中渲染显示即可。整个视图的代码如下，由于代码比较长，所以代码实现的功能直接在代码块中注释，就不在文章中进一步说明了。推荐使用大屏幕阅读器获取更好的阅读体验。</p>
<div class="codehilite"><pre><span></span><span class="n">blog</span><span class="o">/</span><span class="n">views</span><span class="o">.</span><span class="n">py</span>

<span class="k">class</span> <span class="nc">IndexView</span><span class="p">(</span><span class="n">ListView</span><span class="p">):</span>
    <span class="n">model</span> <span class="o">=</span> <span class="n">Post</span>
    <span class="n">template_name</span> <span class="o">=</span> <span class="s1">&#39;blog/index.html&#39;</span>
    <span class="n">context_object_name</span> <span class="o">=</span> <span class="s1">&#39;post_list&#39;</span>
    <span class="n">paginate_by</span> <span class="o">=</span> <span class="mi">10</span>

    <span class="k">def</span> <span class="nf">get_context_data</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="o">**</span><span class="n">kwargs</span><span class="p">):</span>
        <span class="sd">&quot;&quot;&quot;</span>
<span class="sd">        在视图函数中将模板变量传递给模板是通过给 render 函数的 context 参数传递一个字典实现的，</span>
<span class="sd">        例如 render(request, &#39;blog/index.html&#39;, context={&#39;post_list&#39;: post_list})，</span>
<span class="sd">        这里传递了一个 {&#39;post_list&#39;: post_list} 字典给模板。</span>
<span class="sd">        在类视图中，这个需要传递的模板变量字典是通过 get_context_data 获得的，</span>
<span class="sd">        所以我们复写该方法，以便我们能够自己再插入一些我们自定义的模板变量进去。</span>
<span class="sd">        &quot;&quot;&quot;</span>

        <span class="c1"># 首先获得父类生成的传递给模板的字典。</span>
        <span class="n">context</span> <span class="o">=</span> <span class="nb">super</span><span class="p">()</span><span class="o">.</span><span class="n">get_context_data</span><span class="p">(</span><span class="o">**</span><span class="n">kwargs</span><span class="p">)</span>

        <span class="c1"># 父类生成的字典中已有 paginator、page_obj、is_paginated 这三个模板变量，</span>
        <span class="c1"># paginator 是 Paginator 的一个实例，</span>
        <span class="c1"># page_obj 是 Page 的一个实例，</span>
        <span class="c1"># is_paginated 是一个布尔变量，用于指示是否已分页。</span>
        <span class="c1"># 例如如果规定每页 10 个数据，而本身只有 5 个数据，其实就用不着分页，此时 is_paginated=False。</span>
        <span class="c1"># 关于什么是 Paginator，Page 类在 Django Pagination 简单分页：http://zmrenwu.com34.html 中已有详细说明。</span>
        <span class="c1"># 由于 context 是一个字典，所以调用 get 方法从中取出某个键对应的值。</span>
        <span class="n">paginator</span> <span class="o">=</span> <span class="n">context</span><span class="o">.</span><span class="n">get</span><span class="p">(</span><span class="s1">&#39;paginator&#39;</span><span class="p">)</span>
        <span class="n">page</span> <span class="o">=</span> <span class="n">context</span><span class="o">.</span><span class="n">get</span><span class="p">(</span><span class="s1">&#39;page_obj&#39;</span><span class="p">)</span>
        <span class="n">is_paginated</span> <span class="o">=</span> <span class="n">context</span><span class="o">.</span><span class="n">get</span><span class="p">(</span><span class="s1">&#39;is_paginated&#39;</span><span class="p">)</span>

        <span class="c1"># 调用自己写的 pagination_data 方法获得显示分页导航条需要的数据，见下方。</span>
        <span class="n">pagination_data</span> <span class="o">=</span> <span class="bp">self</span><span class="o">.</span><span class="n">pagination_data</span><span class="p">(</span><span class="n">paginator</span><span class="p">,</span> <span class="n">page</span><span class="p">,</span> <span class="n">is_paginated</span><span class="p">)</span>

        <span class="c1"># 将分页导航条的模板变量更新到 context 中，注意 pagination_data 方法返回的也是一个字典。</span>
        <span class="n">context</span><span class="o">.</span><span class="n">update</span><span class="p">(</span><span class="n">pagination_data</span><span class="p">)</span>

        <span class="c1"># 将更新后的 context 返回，以便 ListView 使用这个字典中的模板变量去渲染模板。</span>
        <span class="c1"># 注意此时 context 字典中已有了显示分页导航条所需的数据。</span>
        <span class="k">return</span> <span class="n">context</span>

    <span class="k">def</span> <span class="nf">pagination_data</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">paginator</span><span class="p">,</span> <span class="n">page</span><span class="p">,</span> <span class="n">is_paginated</span><span class="p">):</span>
        <span class="k">if</span> <span class="ow">not</span> <span class="n">is_paginated</span><span class="p">:</span>
            <span class="c1"># 如果没有分页，则无需显示分页导航条，不用任何分页导航条的数据，因此返回一个空的字典</span>
            <span class="k">return</span> <span class="p">{}</span>

        <span class="c1"># 当前页左边连续的页码号，初始值为空</span>
        <span class="n">left</span> <span class="o">=</span> <span class="p">[]</span>

        <span class="c1"># 当前页右边连续的页码号，初始值为空</span>
        <span class="n">right</span> <span class="o">=</span> <span class="p">[]</span>

        <span class="c1"># 标示第 1 页页码后是否需要显示省略号</span>
        <span class="n">left_has_more</span> <span class="o">=</span> <span class="bp">False</span>

        <span class="c1"># 标示最后一页页码前是否需要显示省略号</span>
        <span class="n">right_has_more</span> <span class="o">=</span> <span class="bp">False</span>

        <span class="c1"># 标示是否需要显示第 1 页的页码号。</span>
        <span class="c1"># 因为如果当前页左边的连续页码号中已经含有第 1 页的页码号，此时就无需再显示第 1 页的页码号，</span>
        <span class="c1"># 其它情况下第一页的页码是始终需要显示的。</span>
        <span class="c1"># 初始值为 False</span>
        <span class="n">first</span> <span class="o">=</span> <span class="bp">False</span>

        <span class="c1"># 标示是否需要显示最后一页的页码号。</span>
        <span class="c1"># 需要此指示变量的理由和上面相同。</span>
        <span class="n">last</span> <span class="o">=</span> <span class="bp">False</span>

        <span class="c1"># 获得用户当前请求的页码号</span>
        <span class="n">page_number</span> <span class="o">=</span> <span class="n">page</span><span class="o">.</span><span class="n">number</span>

        <span class="c1"># 获得分页后的总页数</span>
        <span class="n">total_pages</span> <span class="o">=</span> <span class="n">paginator</span><span class="o">.</span><span class="n">num_pages</span>

        <span class="c1"># 获得整个分页页码列表，比如分了四页，那么就是 [1, 2, 3, 4]</span>
        <span class="n">page_range</span> <span class="o">=</span> <span class="n">paginator</span><span class="o">.</span><span class="n">page_range</span>

        <span class="k">if</span> <span class="n">page_number</span> <span class="o">==</span> <span class="mi">1</span><span class="p">:</span>
            <span class="c1"># 如果用户请求的是第一页的数据，那么当前页左边的不需要数据，因此 left=[]（已默认为空）。</span>
            <span class="c1"># 此时只要获取当前页右边的连续页码号，</span>
            <span class="c1"># 比如分页页码列表是 [1, 2, 3, 4]，那么获取的就是 right = [2, 3]。</span>
            <span class="c1"># 注意这里只获取了当前页码后连续两个页码，你可以更改这个数字以获取更多页码。</span>
            <span class="n">right</span> <span class="o">=</span> <span class="n">page_range</span><span class="p">[</span><span class="n">page_number</span><span class="p">:</span><span class="n">page_number</span> <span class="o">+</span> <span class="mi">2</span><span class="p">]</span>

            <span class="c1"># 如果最右边的页码号比最后一页的页码号减去 1 还要小，</span>
            <span class="c1"># 说明最右边的页码号和最后一页的页码号之间还有其它页码，因此需要显示省略号，通过 right_has_more 来指示。</span>
            <span class="k">if</span> <span class="n">right</span><span class="p">[</span><span class="o">-</span><span class="mi">1</span><span class="p">]</span> <span class="o">&lt;</span> <span class="n">total_pages</span> <span class="o">-</span> <span class="mi">1</span><span class="p">:</span>
                <span class="n">right_has_more</span> <span class="o">=</span> <span class="bp">True</span>

            <span class="c1"># 如果最右边的页码号比最后一页的页码号小，说明当前页右边的连续页码号中不包含最后一页的页码</span>
            <span class="c1"># 所以需要显示最后一页的页码号，通过 last 来指示</span>
            <span class="k">if</span> <span class="n">right</span><span class="p">[</span><span class="o">-</span><span class="mi">1</span><span class="p">]</span> <span class="o">&lt;</span> <span class="n">total_pages</span><span class="p">:</span>
                <span class="n">last</span> <span class="o">=</span> <span class="bp">True</span>

        <span class="k">elif</span> <span class="n">page_number</span> <span class="o">==</span> <span class="n">total_pages</span><span class="p">:</span>
            <span class="c1"># 如果用户请求的是最后一页的数据，那么当前页右边就不需要数据，因此 right=[]（已默认为空），</span>
            <span class="c1"># 此时只要获取当前页左边的连续页码号。</span>
            <span class="c1"># 比如分页页码列表是 [1, 2, 3, 4]，那么获取的就是 left = [2, 3]</span>
            <span class="c1"># 这里只获取了当前页码后连续两个页码，你可以更改这个数字以获取更多页码。</span>
            <span class="n">left</span> <span class="o">=</span> <span class="n">page_range</span><span class="p">[(</span><span class="n">page_number</span> <span class="o">-</span> <span class="mi">3</span><span class="p">)</span> <span class="k">if</span> <span class="p">(</span><span class="n">page_number</span> <span class="o">-</span> <span class="mi">3</span><span class="p">)</span> <span class="o">&gt;</span> <span class="mi">0</span> <span class="k">else</span> <span class="mi">0</span><span class="p">:</span><span class="n">page_number</span> <span class="o">-</span> <span class="mi">1</span><span class="p">]</span>

            <span class="c1"># 如果最左边的页码号比第 2 页页码号还大，</span>
            <span class="c1"># 说明最左边的页码号和第 1 页的页码号之间还有其它页码，因此需要显示省略号，通过 left_has_more 来指示。</span>
            <span class="k">if</span> <span class="n">left</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">&gt;</span> <span class="mi">2</span><span class="p">:</span>
                <span class="n">left_has_more</span> <span class="o">=</span> <span class="bp">True</span>

            <span class="c1"># 如果最左边的页码号比第 1 页的页码号大，说明当前页左边的连续页码号中不包含第一页的页码，</span>
            <span class="c1"># 所以需要显示第一页的页码号，通过 first 来指示</span>
            <span class="k">if</span> <span class="n">left</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">&gt;</span> <span class="mi">1</span><span class="p">:</span>
                <span class="n">first</span> <span class="o">=</span> <span class="bp">True</span>
        <span class="k">else</span><span class="p">:</span>
            <span class="c1"># 用户请求的既不是最后一页，也不是第 1 页，则需要获取当前页左右两边的连续页码号，</span>
            <span class="c1"># 这里只获取了当前页码前后连续两个页码，你可以更改这个数字以获取更多页码。</span>
            <span class="n">left</span> <span class="o">=</span> <span class="n">page_range</span><span class="p">[(</span><span class="n">page_number</span> <span class="o">-</span> <span class="mi">3</span><span class="p">)</span> <span class="k">if</span> <span class="p">(</span><span class="n">page_number</span> <span class="o">-</span> <span class="mi">3</span><span class="p">)</span> <span class="o">&gt;</span> <span class="mi">0</span> <span class="k">else</span> <span class="mi">0</span><span class="p">:</span><span class="n">page_number</span> <span class="o">-</span> <span class="mi">1</span><span class="p">]</span>
            <span class="n">right</span> <span class="o">=</span> <span class="n">page_range</span><span class="p">[</span><span class="n">page_number</span><span class="p">:</span><span class="n">page_number</span> <span class="o">+</span> <span class="mi">2</span><span class="p">]</span>

            <span class="c1"># 是否需要显示最后一页和最后一页前的省略号</span>
            <span class="k">if</span> <span class="n">right</span><span class="p">[</span><span class="o">-</span><span class="mi">1</span><span class="p">]</span> <span class="o">&lt;</span> <span class="n">total_pages</span> <span class="o">-</span> <span class="mi">1</span><span class="p">:</span>
                <span class="n">right_has_more</span> <span class="o">=</span> <span class="bp">True</span>
            <span class="k">if</span> <span class="n">right</span><span class="p">[</span><span class="o">-</span><span class="mi">1</span><span class="p">]</span> <span class="o">&lt;</span> <span class="n">total_pages</span><span class="p">:</span>
                <span class="n">last</span> <span class="o">=</span> <span class="bp">True</span>

            <span class="c1"># 是否需要显示第 1 页和第 1 页后的省略号</span>
            <span class="k">if</span> <span class="n">left</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">&gt;</span> <span class="mi">2</span><span class="p">:</span>
                <span class="n">left_has_more</span> <span class="o">=</span> <span class="bp">True</span>
            <span class="k">if</span> <span class="n">left</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">&gt;</span> <span class="mi">1</span><span class="p">:</span>
                <span class="n">first</span> <span class="o">=</span> <span class="bp">True</span>

        <span class="n">data</span> <span class="o">=</span> <span class="p">{</span>
            <span class="s1">&#39;left&#39;</span><span class="p">:</span> <span class="n">left</span><span class="p">,</span>
            <span class="s1">&#39;right&#39;</span><span class="p">:</span> <span class="n">right</span><span class="p">,</span>
            <span class="s1">&#39;left_has_more&#39;</span><span class="p">:</span> <span class="n">left_has_more</span><span class="p">,</span>
            <span class="s1">&#39;right_has_more&#39;</span><span class="p">:</span> <span class="n">right_has_more</span><span class="p">,</span>
            <span class="s1">&#39;first&#39;</span><span class="p">:</span> <span class="n">first</span><span class="p">,</span>
            <span class="s1">&#39;last&#39;</span><span class="p">:</span> <span class="n">last</span><span class="p">,</span>
        <span class="p">}</span>

        <span class="k">return</span> <span class="n">data</span>
</pre></div>


<h2 id="模板中设置分页导航">模板中设置分页导航</h2>
<p>接下来便是在模板中设置分页导航了，将导航条的七个部分的数据一一展现即可，示例代码如下：</p>
<div class="codehilite"><pre><span></span>{% if is_paginated %}
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;pagination&quot;</span><span class="p">&gt;</span>
  {% if first %}
    <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;?page=1&quot;</span><span class="p">&gt;</span>1<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
  {% endif %}
  {% if left %}
    {% if left_has_more %}
        <span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
    {% endif %}
    {% for i in left %}
        <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;?page={{ i }}&quot;</span><span class="p">&gt;</span>{{ i }}<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
    {% endfor %}
  {% endif %}
  <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;?page={{ page_obj.number }}&quot;</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;color: red&quot;</span><span class="p">&gt;</span>{{ page_obj.number }}<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
  {% if right %}
    {% for i in right %}
        <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;?page={{ i }}&quot;</span><span class="p">&gt;</span>{{ i }}<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
    {% endfor %}
    {% if right_has_more %}
        <span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
    {% endif %}
  {% endif %}
  {% if last %}
    <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;?page={{ paginator.num_pages }}&quot;</span><span class="p">&gt;</span>{{ paginator.num_pages }}<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
  {% endif %}
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
{% endif %}
</pre></div>


<p>多添加几篇文章，在示例中就可以看到分页效果了。要使分页导航更加美观，通过设置其 CSS 样式即可：</p>
<p><img alt="Django 完善分页效果" src="//bkt.zmrenwu.com/Django%20%E5%AE%8C%E5%96%84%E5%88%86%E9%A1%B5%E6%95%88%E6%9E%9C.png" /></p>
<h2 id="总结">总结</h2>
<p>本章节的代码位于：<a href="https://github.com/zmrenwu/django-blog-tutorial/tree/Step20_complete-pagination">Step20: complete pagination</a>。</p>
<p>如果遇到问题，请通过下面的方式寻求帮助。</p>
<ul>
<li>简单问题在下方评论区留言。</li>
<li>在 <a href="http://www.pythonzh.cn/category/newbie-qa/">Pythonzhcn 社区的新手问答版块</a> 发布帖子。</li>
<li>在 <a href="http://www.pythonzh.cn/category/newbie-qa/">Pythonzhcn 社区的新手问答版块</a> 发布帖子。</li>
</ul>
    <p class="text-center">
      -- EOF --
    </p>
    <div>
      <button class="btn btn-primary" id="js-reward"><i class="fa fa-jpy"
                                                        aria-hidden="true"></i>
        如果觉得文章对你有帮助，请随意打赏
        <i class="fa fa-chevron-down" aria-hidden="true"></i>
      </button>
      <div class="flex-left flex-wrap units-gap-big mt-4" style="display: none">
        <div class="unit unit-1-on-mobile flex-center">
          <figure>
            <img src="/static/blog/images/weixinpay.jpg" alt="微信支付收款二维码"
                 style="width: 250px">
            <figcaption class="text-center fs-6 mt-2" style="color: green">微信</figcaption>
          </figure>
        </div>
        <div class="unit unit-1-on-mobile flex-center">
          <figure>
            <img src="/static/blog/images/alipay.jpg" alt="支付宝收款二维码" style="width: 250px">
            <figcaption class="text-center fs-6 mt-2 text-primary">支付宝</figcaption>
          </figure>
        </div>
      </div>
    </div>
    <div class="post-tags">
      <ul class="list-inline">
        
      </ul>
    </div>
  </div>
</article>
  <div class="top-gap">
    <div class="jiathis_style">
      <span class="jiathis_txt">分享到：</span>
      <a class="jiathis_button_qzone">QQ空间</a>
      <a class="jiathis_button_tsina">新浪微博</a>
      <a class="jiathis_button_tqq">腾讯微博</a>
      <a class="jiathis_button_weixin">微信</a>
      <a href="http://www.jiathis.com/share?uid=2128865"
         class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis"
         target="_blank">更多</a>
      <a class="jiathis_counter_style"></a>
    </div>
    <script type="text/javascript">
        var jiathis_config = {data_track_clickback: 'true'};
    </script>
    <script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=2128865"
            charset="utf-8"></script>
    <!-- JiaThis Button END -->
  </div>
  <br>
  <div class="top-gap clearfix">
    
      <a href="34.html">
        <i class="fa fa-angle-double-left" aria-hidden="true"></i>
        Django Pagination 简单分页
      </a>
    
    
      <a class="float-right" href="38.html">
        统计各个分类下的文章数
        <i class="fa fa-angle-double-right" aria-hidden="true"></i>
      </a>
    
  </div>
  

  <section class="comment-area top-gap-big" id="comment-area">
    <h5>66 条评论 / 25 人参与</h5>
    
      
<div class="flex-center top-gap login-panel p-7">
  <div>
    <div class="text-muted text-center login-header"><span>登录后回复</span></div>
    <div class="flex-center text-center social-icons mt-3">
                        <span class="weibo mr-3">
                            <a href="/accounts/weibo/login/">
                                <i class="fa fa-weibo" aria-hidden="true"></i>
                            </a>
                        </span>
      <span class="github">
                            <a href="/accounts/github/login/">
                                <i class="fa fa-github" aria-hidden="true"></i>
                            </a>
                        </span>
    </div>
  </div>
</div>
    
    <div class="top-gap-big comment-list">
  
    <div class="flex-left py-4" id="c2379">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="http://tvax2.sinaimg.cn/crop.0.0.996.996.180/006erFJPly8fes7xmw46pj30ro0rojtv.jpg"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">Me_Before丨You
          
        </span>
    
  </header>
  <div class="comment-body">
    <p>sequence index must be integer, not ‘slice’&nbsp;</p><p>这是因为xrange对象不能进行slice操作，进入templatetags,将pagination_tags.py,paginate函数里的page_range = paginator.page_range改为 page_range = list(paginator.page_range)<br></p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">2 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/2379"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
        <div class="comment-descendant-list">
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c2308">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="http://tvax1.sinaimg.cn/crop.122.50.277.277.180/e9403d5fly8fhi4z7xt3cj20dw0b40uz.jpg"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">孤云飘飘zhao
          
        </span>
    
  </header>
  <div class="comment-body">
    <p>老师的思路非常好,我来顺便简化一下一些重复的代码.</p><pre><code class="lang-python">def pagination_data(self, paginator, page, is_paginated):<br />    if not is_paginated:<br />        return {}<br />    left_has_more = False<br />    right_has_more = False<br />    first = False<br />    last = False<br />    page_number = page.number<br />    total_pages = paginator.num_pages<br />    page_range = paginator.page_range<br />    right = page_range[page_number:page_number + 2]<br />    left = page_range[(page_number - 3) if (page_number - 3) &gt; 0 else 0:page_number - 1]<br />    if right:<br />        if right[-1] &lt; total_pages - 1:<br />            right_has_more = True<br />        if right[-1] &lt; total_pages:<br />            last = True<br />    if left:<br />        if left[0] &gt; 2:<br />            left_has_more = True<br />        if left[0] &gt; 1:<br />            first = True</code></pre>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">1 月，1 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/2308"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
        <div class="comment-descendant-list">
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c2229">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/27860018?v=4"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">郭效杨
          
        </span>
    
  </header>
  <div class="comment-body">
    <p style="">那这样看起来只有index主页有分页啊进入标签页，类别页会调用index view中的分页吗？<br></p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">2 月前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/2229"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
        <div class="comment-descendant-list">
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c2216">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="https://avatars3.githubusercontent.com/u/19897495?v=4"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">ELI
          
        </span>
    
  </header>
  <div class="comment-body">
    <p>感谢楼主的教程～</p><p>贴一下IndexView里的paginator_data函数的比较简洁的写法：</p><pre><code class="lang-python">def pagination_data(self, paginator, page, is_paginated):<br />    if not is_paginated:<br />        return {}<br />    left = []<br />    right = []<br />    left_has_more = False    <br />&nbsp;&nbsp;&nbsp;&nbsp;right_has_more = False    <br />&nbsp;&nbsp;&nbsp;&nbsp;first = False    <br />    last = False   <br /> <br />    page_number = page.number<br />    total_pages = paginator.num_pages<br />    page_range = paginator.page_range<br /><br />    left = page_range[(page_number - 3) if (page_number - 3) &gt; 0 else 0:<br />                      (page_number - 1) if (page_number - 1) &gt; 0 else 0]<br />    right = page_range[page_number:page_number + 2]<br /><br />    if right:<br />        if right[-1] &lt; total_pages:<br />            last = True        <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if right[-1] &lt; total_pages - 1:<br />            right_has_more = True    <br />&nbsp;&nbsp;&nbsp;&nbsp;if left:<br />        if left[0] &gt; 1:<br />            first = True        <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if left[0] &gt; 2:<br />            left_has_more = True  <br />  <br />&nbsp;&nbsp;&nbsp;&nbsp;data = {'left': left,<br />        &nbsp;&nbsp;&nbsp;&nbsp;'right': right,        <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'left_has_more': left_has_more,<br />&nbsp;&nbsp;&nbsp;&nbsp;        'right_has_more': right_has_more, <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;       'first': first,       <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'last': last,}<br /><br />    return data<br></code></pre>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">2 月，1 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/2216"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
        <div class="comment-descendant-list">
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c1972">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/31503932?v=4"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">Fossen Wang
          
        </span>
    
  </header>
  <div class="comment-body">
    <p>分享一段css代码用于美化分页，效果类似于开头的示例：</p><pre><code class="lang-css">.pagination {margin-top: 25px; text-align: center;}<br />.pagination a {<br />  display: inline-block;<br />  line-height: 38px;<br />  padding: 0 15px;<br />  margin-right: 4px;<br />  text-align: center;<br />  background-color: #fff;<br />  user-select: none;<br />  cursor: pointer;<br />  font-size: 14px;<br />  border: 1px solid #d7dde4;<br />  border-radius: 4px;<br />  transition: all .2s ease-in-out;<br />}<br />.pagination a:hover {<br />  color: #A161BF;<br />  border: 1px solid #A161BF;<br />}<br />.pagination .current-page {color: white; background-color: #A161BF;}<br />.pagination .current-page:hover {<br />  color: white;<br />  border: 1px solid #A161BF;<br />}<br />.pagination span {<br />  display: inline-block;<br />  font-size: 20px;<br />  line-height: 38px;<br />  padding: 0 8px;<br />  margin-right: 4px;<br />}<br></code></pre><p>还需要改写模板中的一行代码：</p><pre><code>&lt;a href="?page={{ page_obj.number }}" style="color: red"&gt;{{ page_obj.number }}&lt;/a&gt;<br></code></pre><p>改为：</p><pre><code class="lang-html">&lt;a class="current-page" href="?page={{ page_obj.number }}" &gt;{{ page_obj.number }}&lt;/a&gt;</code></pre>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">4 月前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1972"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
          <hr class="">
        
        <div class="comment-descendant-list">
          
            <div class="flex-left py-4" id="c2000">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="http://tva2.sinaimg.cn/crop.0.0.1080.1080.180/b1fce18djw8et083fr9yuj20u00u040n.jpg"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">5岁月神偷5
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">Fossen Wang
        

  </header>
  <div class="comment-body">
    <p>可以用，谢谢</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">3 月，3 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/2000"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c2361">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars1.githubusercontent.com/u/31297795?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">谢亚波
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">Fossen Wang
        

  </header>
  <div class="comment-body">
    <p>大哥，这段css代码，贴在哪个位置，原谅小弟不才，问这么简单的问题。</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">2 周，5 日前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/2361"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c2362">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars1.githubusercontent.com/u/31297795?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">谢亚波
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">5岁月神偷5
        

  </header>
  <div class="comment-body">
    <p>大哥，这段css代码，贴在哪个位置，原谅小弟不才，问这么简单的问题。<br></p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">2 周，5 日前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/2362"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c2378">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="http://tvax2.sinaimg.cn/crop.0.0.996.996.180/006erFJPly8fes7xmw46pj30ro0rojtv.jpg"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">Me_Before丨You
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">谢亚波
        

  </header>
  <div class="comment-body">
    <p>自定义style</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">2 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/2378"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c1878">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="http://tvax2.sinaimg.cn/crop.0.0.996.996.180/006mOlR7ly8fe01ouxlu3j30ro0rogqn.jpg"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">Stallionshell
          
        </span>
    
  </header>
  <div class="comment-body">
    <p>博主，在调用父类的方法的时候，super是不是需要添加一下参数？</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;context = super().get_context_data(**kwargs)</p><p>改为&nbsp; context = super(IndexView,self).get_context_data(**kwargs)</p><p>不然的话&nbsp;可能出现index界面无法读取文章的情况，不知道是不是python或者django环境版本的问题。这是我测试的时候出现的一个bug</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">4 月，2 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1878"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
          <hr class="">
        
        <div class="comment-descendant-list">
          
            <div class="flex-left py-4" id="c1880">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="http://tvax2.sinaimg.cn/crop.0.0.996.996.180/006mOlR7ly8fe01ouxlu3j30ro0rogqn.jpg"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">Stallionshell
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">Stallionshell
        

  </header>
  <div class="comment-body">
    <p>好像不是这个的问题，我又出现了这个bug&nbsp; 尴尬</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">4 月，2 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1880"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c1881">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/13174219?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">追梦人物
          
            <span class="master">[博主]</span>
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">Stallionshell
        

  </header>
  <div class="comment-body">
    <p>这是 python3 的写法，python2需要使用父类和self作为参数。</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">4 月，2 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1881"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c1714">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="https://avatars0.githubusercontent.com/u/15711752?v=4"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">point6013
          
        </span>
    
  </header>
  <div class="comment-body">
    <p>出现了一个问题，假如说是总共两页的时候，按照您的代码，浏览第二页的时候，页码1是不显示的，我觉得应该修改一下</p><pre><code class="lang-python">elif page_number == total_pages:  <br />&nbsp;&nbsp;&nbsp;&nbsp; left = page_range[(page_number - 3)if (page_number - 3) &gt; 0 else 0:page_number - 1]  <br />&nbsp;&nbsp;&nbsp;&nbsp; if left[0] &gt; 2:     <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; left_has_more = True  <br />&nbsp;&nbsp;&nbsp;&nbsp; if left[0] &gt; 1:      <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;first = True</code></pre><p>这个地方，如果是总共两页的话，left应该是left=page_range[0:1],此时page_range=[1,2],即left=[1],这个时候如果去比较left[0]与1的大小的话，first=False了，我觉得应该修改此处的代码。不知道我的逻辑对不对</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">5 月，1 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1714"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
          <hr class="">
        
        <div class="comment-descendant-list">
          
            <div class="flex-left py-4" id="c1724">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/13174219?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">追梦人物
          
            <span class="master">[博主]</span>
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">point6013
        

  </header>
  <div class="comment-body">
    <p>可能吧，但我当时测试的时候好像没有发现问题，你测试一下应该就知道了。有问题的话修改一下逻辑即可。</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">5 月，1 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1724"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c1725">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars0.githubusercontent.com/u/15711752?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">point6013
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">追梦人物
        
            <span class="master">[博主]</span>
        

  </header>
  <div class="comment-body">
    <p>谢谢博主，抽出宝贵的上班时间回复消息</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">5 月，1 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1725"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c1623">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/31058743?v=4"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">cuitongji
          
        </span>
    
  </header>
  <div class="comment-body">
    <p>博主你好，完善页码之后出现如下错误是为什么呢？</p><p>context = super().get_context_data(**kwargs)</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">5 月，2 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1623"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
          <hr class="">
        
        <div class="comment-descendant-list">
          
            <div class="flex-left py-4" id="c1710">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars0.githubusercontent.com/u/15380695?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">zhb1207
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">cuitongji
        

  </header>
  <div class="comment-body">
    <p>你是Python2还是3？</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">5 月，1 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1710"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c1711">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/31058743?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">cuitongji
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">zhb1207
        

  </header>
  <div class="comment-body">
    <p>我该环境之后没问题了，谢谢博主！</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">5 月，1 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1711"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c1712">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars0.githubusercontent.com/u/15380695?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">zhb1207
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">cuitongji
        

  </header>
  <div class="comment-body">
    <p>不用客气，我不是博主^_^</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">5 月，1 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1712"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c1485">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="http://tva3.sinaimg.cn/crop.0.0.180.180.180/3fc08a41jw1e8qgp5bmzyj2050050aa8.jpg"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">Faraday179
          
        </span>
    
  </header>
  <div class="comment-body">
    <p>博主好, &nbsp;blog/views中添加了分页后, &nbsp;执行127.0.0.1:8000显示以下错误;</p><p>TypeError at /'NoneType' object is not iterable<br></p><p><br></p><p>具体错误如下, &nbsp;表中有13条数据 , 设置了paginate_by = 2, 不明白为什么pagination_data = None ? 谢谢指点&nbsp;</p><p>/blogproject/blog/views.py&nbsp;in&nbsp;get_context_data<br></p><p>28. &nbsp;context.update(pagination_data) <br></p><p>Local Vars</p><p>Variable &nbsp; &nbsp; &nbsp; &nbsp; Value</p><p>__class__ &nbsp; &nbsp;&lt;class 'blog.views.IndexView'&gt;&nbsp;</p><p>context &nbsp; &nbsp; &nbsp; &nbsp;{'is_paginated': True, 'object_list': &lt;QuerySet [&lt;Post: r234223&gt;, &lt;Post: kjjadf&gt;]&gt;, 'page_obj': &lt;Page 1 of 7&gt;, 'paginator': &lt;django.core.paginator.Paginator object at 0x1097d53c8&gt;, 'post_list': &lt;QuerySet [&lt;Post: r234223&gt;, &lt;Post: kjjadf&gt;]&gt;, 'view': &lt;blog.views.IndexView object at 0x1097d5358&gt;}&nbsp;</p><p>is_paginated &nbsp;True&nbsp;</p><p>kwargs &nbsp; {}&nbsp;</p><p>page &nbsp; &nbsp;&lt;Page 1 of 7&gt;&nbsp;</p><p>pagination_data &nbsp;None&nbsp;</p><p>paginator &nbsp; &nbsp;&lt;django.core.paginator.Paginator object at 0x1097d53c8&gt;&nbsp;</p><p>self &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;blog.views.IndexView object at 0x1097d5358<br></p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">6 月，2 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1485"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
        <div class="comment-descendant-list">
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c1253">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/13174219?v=4"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">追梦人物
          
            <span class="master">[博主]</span>
          
        </span>
    
  </header>
  <div class="comment-body">
    这通常是你的 url 写错了，对比一下文章中的，仔细一点。
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">7 月，1 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1253"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
        <div class="comment-descendant-list">
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c1252">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="https://avatars3.githubusercontent.com/u/22702293?v=4"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">usher
          
        </span>
    
  </header>
  <div class="comment-body">
    Error during template rendering<br /><br />In template D:\Django\blogproject\templates\base.html, error at line 15<br />Reverse for 'category' with arguments '('',)' not found. 1 pattern(s) tried: ['category/(?P<pk>[0-9]+)/$']<br />5	<head><br />6	    <title>Black &amp; White</title><br />7	<br />8	    <!-- meta --><br />9	    <meta charset="UTF-8"><br />10	    <meta name="viewport" content="width=device-width, initial-scale=1"><br />11	<br />12	    <!-- css --><br />13	    <link rel="stylesheet" href="ionicons.min.css"><br />14	    <link rel="stylesheet" href="bootstrap.min.css' %}"><br />15	    <link rel="stylesheet" href="pace.css' %}"><br />16	    <link rel="stylesheet" href="custom.css' %}"><br />17	    <link rel="stylesheet" href="github.css' %}"><br />18	<br />19	    <!-- js --><br />20	    <script src="{% static 'blog/js/jquery-2.1.3.min.js' %}"></script><br />21	    <script src="{% static 'blog/js/bootstrap.min.js' %}"></script><br />22	    <script src="{% static 'blog/js/pace.min.js' %}"></script><br />23	    <script src="{% static 'blog/js/modernizr.custom.js' %}"></script><br />24	</head><br />2<br />博主报了这个错误，这是哪错了？
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">7 月，1 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1252"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
          <hr class="">
        
        <div class="comment-descendant-list">
          
            <div class="flex-left py-4" id="c1254">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/13174219?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">追梦人物
          
            <span class="master">[博主]</span>
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">usher
        

  </header>
  <div class="comment-body">
    <p>这通常是你的 url 写错了，对比一下文章中的，仔细一点。<br></p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">7 月，1 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1254"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c1265">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars3.githubusercontent.com/u/22702293?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">usher
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">追梦人物
        
            <span class="master">[博主]</span>
        

  </header>
  <div class="comment-body">
    <p>把+改成*就对了==</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">7 月前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1265"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c1184">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="http://tva1.sinaimg.cn/crop.0.0.640.640.180/b4fcf0adjw8euzl1yrpjwj20hs0hsdgf.jpg"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">一条具有时间跨度的单身狗1
          
        </span>
    
  </header>
  <div class="comment-body">
    # 首页类视图<br />class IndexView(ListView):<br />    model = Article<br />    template_name = 'blog/index.html'<br />    context_object_name = 'art_list'<br />    ordering = '-art_ctime'<br />    paginate_by = 1<br /><br />    def get_context_data(self, **kwargs):<br />        # 获取父类传递的给模板的字典<br />        context = super().get_context_data(**kwargs)<br /><br />        # 将分页导航条的模板变量更新到context 中<br />        context.update(pagination_data)<br /><br />        # 将 context 返回，以便于调用新的 context 来渲染模板<br />        return context<br /><br />    def pagination_data(self, paginator, page, is_paginated):<br />        if not is_paginated:<br />            # 如果没有分页，就不需要导航条，返回空字典<br />            return {}<br /><br />        # 当前页面左边的页码，默认空<br />        left = []<br /><br />        # 当前页面右边的页码，默认空<br />        right = []<br /><br />        # 标识第一页后面是否需要显示省略号<br />        left_has_more = False<br /><br />        # 标识最后一页前是否需要省略号<br />        right_has_more = False<br /><br />        # 标记是否显示第一页，如果左边连续的页码中包含第一页，则无需显示第一页<br />        first = False<br /><br />        # 标记是否显示最后一页<br />        last = False<br /><br />        # 获取当前访问的页数<br />        page_number = page.number<br /><br />        # 获取分页后的总页数<br />        total_pages = paginator.num_pages<br /><br />        # 获取整个分页页码表，比如分 3 页则是 [1, 2, 3]<br />        page_range = paginator.page_range<br /><br />        # 切割页数<br />        cut_page = 2<br /><br />        # 如果所在页面在第一页，则判断后面页数<br />        if page_number == 1:<br />            right = page_range[page_number:(page_number + cut_page)]<br /><br />            if total_pages > (right[-1] + 2):<br />                right_has_more = True<br /><br />            if total_pages > right[-1]:<br />                last = True<br />        # 如果在最后一页<br />        elif page_number == total_pages:<br />            left = page_range[(-(cut_page + 1)):(-1)]<br /><br />            if left[0] > 2:<br />                left_has_more = True<br /><br />            if left[0] > 1:<br />                first = True<br />        # 如果即不再第一页也不再最后一页<br />        else:<br />            # 判断左边<br />            left = page_range[(-((total_pages - page_number + 1) + cut_page)):(-(total_pages - page_number + 1))]<br />            if left[0] > 2:<br />                left_has_more = True<br /><br />            if left[0] > 1:<br />                first = True<br /><br />            # 判断右边<br />            right = page_range[page_number:(page_number + cut_page)]<br /><br />            if total_pages > (right[-1] + 1):<br />                right_has_more = True<br /><br />            if total_pages > (right[-1]):<br />                last = True<br /><br />        data = {<br />            'left': left,<br />            'right': right,<br />            'left_has_more': left_has_more,<br />            'right_has_more': right_has_more,<br />            'first': first,<br />            'last': last,<br /><br />       return data<br /><br />这是我写的，有些地方和博主的不一样，是自定义的，测试如果有问题的可以参考。有些地方分开可能好理解一点。
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">7 月，1 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1184"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
          <hr class="">
        
        <div class="comment-descendant-list">
          
            <div class="flex-left py-4" id="c1185">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="http://tva1.sinaimg.cn/crop.0.0.640.640.180/b4fcf0adjw8euzl1yrpjwj20hs0hsdgf.jpg"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">一条具有时间跨度的单身狗1
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">一条具有时间跨度的单身狗1
        

  </header>
  <div class="comment-body">
    data 字典那里复制的时候少了个 ｝
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">7 月，1 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1185"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c1165">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="http://tvax3.sinaimg.cn/crop.0.0.1328.1328.180/710cc501ly8ff1it606dlj210w10wadz.jpg"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">-陈思煜
          
        </span>
    
  </header>
  <div class="comment-body">
    我感觉作者写的代码逻辑有问题，但是运行却能完美运行，这是DJango里面自带的功能吗？比如<br />if page_number == 1: <br />    right = page_range[page_number:page_number + 2] <br />当页面只有2页的话，最后right的值却是2和3  但是page_range是没有这个值的
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">7 月，1 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1165"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
          <hr class="">
        
        <div class="comment-descendant-list">
          
            <div class="flex-left py-4" id="c1166">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="http://tvax3.sinaimg.cn/crop.0.0.1328.1328.180/710cc501ly8ff1it606dlj210w10wadz.jpg"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">-陈思煜
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">-陈思煜
        

  </header>
  <div class="comment-body">
    还有比如：<br />else:                                      <br />left = page_range[(page_number - 3) if (page_number - 3) > 0 else 0:page_number - 1]<br />right = page_range[page_number:page_number + 2]<br />当请求到倒数第二页时，right的最大那个比倒数第一页的值还大1<br />但还是没报错
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">7 月，1 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1166"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c1167">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="http://tvax3.sinaimg.cn/crop.0.0.1328.1328.180/710cc501ly8ff1it606dlj210w10wadz.jpg"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">-陈思煜
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">-陈思煜
        

  </header>
  <div class="comment-body">
    看来是我对切片理解不够深了，试了一下，超出范围的切片后，python止取出有效的数值
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">7 月，1 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1167"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c1162">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="http://tvax4.sinaimg.cn/crop.0.0.511.511.180/005OGYdvly8fg3knp4rtbj30e70e8aa8.jpg"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">皮皮欧呢
          
        </span>
    
  </header>
  <div class="comment-body">
    博主，我现在遇到一个问题是：在admin中添加post文章时，在选择tag和category时他们给出的选项是tag object和category object，但是我想要的是tag或者category里边的（Java，Python，数据结构......）等，试了几个方法还是不行
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">7 月，1 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1162"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
          <hr class="">
        
        <div class="comment-descendant-list">
          
            <div class="flex-left py-4" id="c1182">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/13174219?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">追梦人物
          
            <span class="master">[博主]</span>
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">皮皮欧呢
        

  </header>
  <div class="comment-body">
    你需要为 model 定义 __str__ 方法，详情见之前关于model 部分的教程。
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">7 月，1 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1182"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c819">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="https://avatars0.githubusercontent.com/u/23110784?v=4"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">zengzhengrong
          
        </span>
    
  </header>
  <div class="comment-body">
    博主，我没用类方法写视图，没有继承ListView，没有page_obj、is_paginated,这两个字典。
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">8 月，2 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/819"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
          <hr class="">
        
        <div class="comment-descendant-list">
          
            <div class="flex-left py-4" id="c903">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/13174219?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">追梦人物
          
            <span class="master">[博主]</span>
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">zengzhengrong
        

  </header>
  <div class="comment-body">
    可以参考着上一篇的内容自己创建，明白了运行原理自己写也不难。
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">8 月前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/903"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c802">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="http://tvax4.sinaimg.cn/crop.0.0.749.749.180/89a1a077ly8fhp2si7zi9j20ku0ktq48.jpg"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">LeBron-Raymond-Anson
          
        </span>
    
  </header>
  <div class="comment-body">
    博主！我问个问题，我按照你的博文代码一步一步理解敲的，也和GitHub上的代码核对过了，并无出入，这么显示不了上一页和下一页的按钮呢
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">8 月，2 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/802"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
          <hr class="">
        
        <div class="comment-descendant-list">
          
            <div class="flex-left py-4" id="c804">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/13174219?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">追梦人物
          
            <span class="master">[博主]</span>
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">LeBron-Raymond-Anson
        

  </header>
  <div class="comment-body">
    是不是测试地数据太少不足以分页呀？
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">8 月，2 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/804"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c410">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="http://tvax4.sinaimg.cn/crop.0.0.996.996.180/aad1e30fly8feuipebw12j20ro0ro41f.jpg"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">JustBreaking
          
        </span>
    
  </header>
  <div class="comment-body">
    亲测我觉得博主的代码没问题<br />只是我用的py2.7 page_range返回的是一个迭代器，要用list转化一下就好。<br />至于right[page_num:page_num+2] 和left[]的切片，顶多为空（当前页是最后一页），但是即使超出列表的index也不会报错。这样写right/left列表的长度可能为0，可能为1，也可能为2。比较灵活。<br />感谢博主能提供这么好的教程！
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">9 月，3 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/410"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
        <div class="comment-descendant-list">
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c344">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="https://avatars0.githubusercontent.com/u/15061774?v=3"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">yeliang
          
        </span>
    
  </header>
  <div class="comment-body">
    使用python2.7的同学super().get_context_data(**kwargs)这里会报错，应该要改下super(IndexView, self).get_context_data(**kwargs)。<br />使用2.7还需要改写的地方是paginator.page_range，会得到一个xrange的生成器，这个xrange是不能切片的，但是3.6版本没有xrange了，xrange已经变成range，所以可以切片
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">10 月前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/344"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
          <hr class="">
        
        <div class="comment-descendant-list">
          
            <div class="flex-left py-4" id="c349">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/13174219?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">追梦人物
          
            <span class="master">[博主]</span>
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">yeliang
        

  </header>
  <div class="comment-body">
    嗯，对 py2 的兼容我没有考虑了。
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">10 月前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/349"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c409">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="http://tvax4.sinaimg.cn/crop.0.0.996.996.180/aad1e30fly8feuipebw12j20ro0ro41f.jpg"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">JustBreaking
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">yeliang
        

  </header>
  <div class="comment-body">
    没切片，用list(page_range)就好勒
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">9 月，3 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/409"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c438">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars0.githubusercontent.com/u/25241304?v=3"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">Bivectorfoil
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">追梦人物
        
            <span class="master">[博主]</span>
        

  </header>
  <div class="comment-body">
    首先感谢博主精彩的教程，目前我有一个问题，在将index视图函数用类改写以后，访问主页(index.html)却得到这样的错误：TemplateDoesNotExist: blogs/post_list.html，（blogs是我的app名称)，虽然我使用的是py2，但我已经按上面其他同学给出的方法仔细地重写了有关super方法处和page_range处的代码，但仍然得到这个错误，模板文件的位置也已经做了检查，奇怪的是，用同样方法复写的Detail ,archives和category等视图函数均可以访问成功，在此请教博主和各位同学，希望能够得到解答，多谢！完整的报错信息如下：<br /><br />Traceback (most recent call last):<br />  File "/home/zvector/BlogLearn/venv/local/lib/python2.7/site-packages/django/core/handlers/exception.py", line 41, in inner<br />    response = get_response(request)<br />  File "/home/zvector/BlogLearn/venv/local/lib/python2.7/site-packages/django/core/handlers/base.py", line 217, in _get_response<br />    response = self.process_exception_by_middleware(e, request)<br />  File "/home/zvector/BlogLearn/venv/local/lib/python2.7/site-packages/django/core/handlers/base.py", line 215, in _get_response<br />    response = response.render()<br />  File "/home/zvector/BlogLearn/venv/local/lib/python2.7/site-packages/django/template/response.py", line 107, in render<br />    self.content = self.rendered_content<br />  File "/home/zvector/BlogLearn/venv/local/lib/python2.7/site-packages/django/template/response.py", line 82, in rendered_content<br />    template = self.resolve_template(self.template_name)<br />  File "/home/zvector/BlogLearn/venv/local/lib/python2.7/site-packages/django/template/response.py", line 64, in resolve_template<br />    return select_template(template, using=self.using)<br />  File "/home/zvector/BlogLearn/venv/local/lib/python2.7/site-packages/django/template/loader.py", line 53, in select_template<br />    raise TemplateDoesNotExist(', '.join(template_name_list), chain=chain)<br />TemplateDoesNotExist: blogs/post_list.html
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">9 月，3 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/438"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c446">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/13174219?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">追梦人物
          
            <span class="master">[博主]</span>
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">Bivectorfoil
        

  </header>
  <div class="comment-body">
    把 index.html 改为 post_list.html
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">9 月，3 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/446"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c451">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars0.githubusercontent.com/u/25241304?v=3"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">Bivectorfoil
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">追梦人物
        
            <span class="master">[博主]</span>
        

  </header>
  <div class="comment-body">
    感谢博主，目前访问主页成功，访问其他（归档，分类等）也成功了，但我有个疑问，这样修改的原理是什么？我仔细对照过博主github教程上的代码，主页的文件名称并不需要修改（为index.html），这是为何？这样的改动会不会太大，因为相应的其他地方需要用到index.html文件的地方也需要修改。再次感谢博主的解答。
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">9 月，3 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/451"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c452">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/13174219?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">追梦人物
          
            <span class="master">[博主]</span>
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">Bivectorfoil
        

  </header>
  <div class="comment-body">
    只是为了方便，所以各个视图函数都渲染了 index.html，如果你的模板不同的话，你可以创建不同的模板，不同视图渲染不同模板就可以了。
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">9 月，3 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/452"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c1632">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars1.githubusercontent.com/u/20694632?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">Annihilater
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">JustBreaking
        

  </header>
  <div class="comment-body">
    <p>感谢，猜到了是2.7兼容的问题还没找出来，幡然醒悟</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">5 月，2 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1632"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c307">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="https://avatars3.githubusercontent.com/u/28074433?v=3"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">qiqiming
          
        </span>
    
  </header>
  <div class="comment-body">
    pagination_data 这个函数感觉博主写的逻辑很严谨，但是是不是有一个小小的问题， rigth并不会取到1， 所以如果当前页面为第一页时， 就没有页码1了， 感觉把right = page_range[page_number:page_number + 2]，改为right = page_range[page_number - 1:page_number + 2]是不是好一些。
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">10 月前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/307"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
          <hr class="">
        
        <div class="comment-descendant-list">
          
            <div class="flex-left py-4" id="c308">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars3.githubusercontent.com/u/28074433?v=3"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">qiqiming
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">qiqiming
        

  </header>
  <div class="comment-body">
    以上说的是page_num == 1时
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">10 月前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/308"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c312">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/13174219?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">追梦人物
          
            <span class="master">[博主]</span>
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">qiqiming
        

  </header>
  <div class="comment-body">
    应该可以取到 1 吧？我博客用的这段代码，使用下来没发现 bug。你这样修改以后测试有问题么？
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">10 月前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/312"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c315">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars3.githubusercontent.com/u/28074433?v=3"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">qiqiming
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">追梦人物
        
            <span class="master">[博主]</span>
        

  </header>
  <div class="comment-body">
    想了一下逻辑，page_num == 1时right = page_range[page_num: page_num + 2] 无论如何取不到1，因为page_range[0]为1, 而此时page_num=1, 取到的是2， first此时也一直为false取不到1。亲测也是如此。
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">10 月前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/315"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c316">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars3.githubusercontent.com/u/28074433?v=3"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">qiqiming
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">qiqiming
        

  </header>
  <div class="comment-body">
    当然不排除我可能有bug。。
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">10 月前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/316"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c318">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/13174219?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">追梦人物
          
            <span class="master">[博主]</span>
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">qiqiming
        

  </header>
  <div class="comment-body">
    其实我现在搞不清我写的代码了，总之目前来看运行上没什么问题，也就懒得管了。当然我这个代码里可能有些重复，有可以优化的地方。
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">10 月前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/318"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c337">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars0.githubusercontent.com/u/15061774?v=3"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">yeliang
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">qiqiming
        

  </header>
  <div class="comment-body">
    我可以给您解释下，page_num==1的时候 first本来就是要false的，您可能还没有明白这个参数的意思，frist的意义是“标示是否需要显示第一页的页码号”，您现在当前页面是第一页的情况，只要判断right和last以及right_has_more这些参数即可，你看看index.html模板下的代码就知道了
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">10 月前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/337"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c338">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars0.githubusercontent.com/u/15061774?v=3"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">yeliang
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">追梦人物
        
            <span class="master">[博主]</span>
        

  </header>
  <div class="comment-body">
    这个代码逻辑性已经非常号了<br />if page_number == 1:<br />            # 用户请求的是第一页的数据<br />            # 页码的右边部分为[2,3],左边和右边的连续页码都是加2<br />            right = page_range[1:3]<br />不过我觉的直接写[1:3]会更加简洁明了
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">10 月前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/338"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c339">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/13174219?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">追梦人物
          
            <span class="master">[博主]</span>
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">yeliang
        

  </header>
  <div class="comment-body">
    必须从 page range 里截取吧？因为有时候只有两页。
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">10 月前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/339"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c340">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/13174219?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">追梦人物
          
            <span class="master">[博主]</span>
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">yeliang
        

  </header>
  <div class="comment-body">
    嗯，我明白了，第一页时直接用数字代替就可以了。
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">10 月前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/340"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c341">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars0.githubusercontent.com/u/15061774?v=3"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">yeliang
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">追梦人物
        
            <span class="master">[博主]</span>
        

  </header>
  <div class="comment-body">
    没事的就是超过这个范围也不会有异常的。我都测试过了
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">10 月前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/341"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c352">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars3.githubusercontent.com/u/28074433?v=3"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">qiqiming
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">yeliang
        

  </header>
  <div class="comment-body">
    我知道first的意思， 我的意思是1不会显示， 因为right里面没有。。。。。
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">10 月前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/352"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c353">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars3.githubusercontent.com/u/28074433?v=3"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">qiqiming
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">yeliang
        

  </header>
  <div class="comment-body">
    page_range[1] = 2
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">10 月前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/353"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c361">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars0.githubusercontent.com/u/15061774?v=3"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">yeliang
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">qiqiming
        

  </header>
  <div class="comment-body">
    当你当前页码为1的时候，right肯定不能包含1啊，这位大哥，right的意思是你当前页码右边显示的两个页码数组，怎么可能有1啊？？你当前页码是1啊
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">10 月前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/361"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c362">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/13174219?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">追梦人物
          
            <span class="master">[博主]</span>
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">qiqiming
        

  </header>
  <div class="comment-body">
    是的 1不会显示，在模板中显示的是 current page，而实际就是 1
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">10 月前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/362"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c369">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars3.githubusercontent.com/u/28074433?v=3"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">qiqiming
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">yeliang
        

  </header>
  <div class="comment-body">
    我知道了，理解不同
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">10 月前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/369"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c370">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars3.githubusercontent.com/u/28074433?v=3"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">qiqiming
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">qiqiming
        

  </header>
  <div class="comment-body">
    找出问题了，我已经修改了，感谢讨论
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">10 月前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/370"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c1633">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars1.githubusercontent.com/u/20694632?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">Annihilater
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">qiqiming
        

  </header>
  <div class="comment-body">
    <p>楼上有人解答了，切片取到有效值为止</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">5 月，2 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1633"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c1634">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars1.githubusercontent.com/u/20694632?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">Annihilater
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">Annihilater
        

  </header>
  <div class="comment-body">
    <p>好吧，说的不是一个问题我理解错了</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">5 月，2 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1634"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c225">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/13174219?v=4"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">追梦人物
          
            <span class="master">[博主]</span>
          
        </span>
    
  </header>
  <div class="comment-body">
    类似的，这个分页方法是通用的，稍加修改可以用于任何需要分页的地方。
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">10 月，1 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/225"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
        <div class="comment-descendant-list">
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c224">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/3099245?v=3"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">corebym
          
        </span>
    
  </header>
  <div class="comment-body">
    请问用户profile页面可以做吗？ 用户follow，私信、动态等功能
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">10 月，1 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/224"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
          <hr class="">
        
        <div class="comment-descendant-list">
          
            <div class="flex-left py-4" id="c226">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/13174219?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">追梦人物
          
            <span class="master">[博主]</span>
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">corebym
        

  </header>
  <div class="comment-body">
    这个分页方法是通用的，稍加修改可以用于任何需要分页的地方。
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">10 月，1 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/226"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
          
        </div>
      </div>
    </div>
    
  
</div>
  </section>
</div>
  </div>

    </div>
  </div>
</section>
<footer class="bg-white py-5 mt-5 text-small text-muted">
  <div class="flex-center">
    <div>&copy; 2017 追梦人物的博客</div>
  </div>
  
  
  
</footer>
<script>
    $('[data-menu]').menu();

    var InterValObj; //timer变量，控制时间
    var curCount = 120;//当前剩余秒数

    $('#js-send').on('click', function (event) {
        var $this = $(this);
        var $targetURL = $this.attr('data-target');
        $.post(
            $targetURL,
            {email: $('#id_email').val()},
            function (data) {
                if (data.ok) {
                    $this.attr("disabled", "true");
                    $this.text("重新发送验证码" + "(" + curCount + ")");
                    InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
                    $('.message')
                        .find('span')
                        .text(data.msg)
                } else {
                    $('.message').find('span').text(data.msg)
                }
            }
        );
        return false;
    });

    //timer处理函数
    function SetRemainTime() {
        if (curCount === 0) {
            window.clearInterval(InterValObj);//停止计时器
            $('#js-send').removeAttr("disabled");//启用按钮
            $('#js-send').text("重新发送验证码");
        }
        else {
            curCount--;
            $('#js-send').text("重新发送验证码" + "(" + curCount + ")");
        }
    }

    $('#js-submit').on('click', function (event) {
        var $this = $(this);
        var $form = $('.email-binding-form');
        var $targetURL = $form.attr('action');
        console.log($targetURL);

        $.post(
            $targetURL,
            {
                email: $('#id_email').val(),
                verification_code: $('#id_verification_code').val()
            },
            function (data) {
                if (data.ok) {
                    location.reload();
                } else {
                    $('.message')
                        .find('span')
                        .text(data.msg)
                }
            }
        );
        return false;
    });


    var editor = new Simditor({
        textarea: $('#id_comment'),
        placeholder: "提出你的见解...",
        toolbarFloat: false,
        cleanPaste: true,
        toolbar: [
            'bold',
            'italic',
            'underline',
            'strikethrough',
            'color',
            'ol',
            'ul',
            'blockquote',
            'code',
            'table',
            'link',
            'image',
            'hr'
        ]
    });
</script>


</body>
</html>